<template>
  <el-popover
    v-model:visible="visible"
    placement="bottom"
    popper-class="filter-popper"
    width="auto"
  >
    <template #reference>
      <slot name="reference">
        <span class="el-dropdown-link" @click="visible = true">
          <span>{{ _linkText }}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
      </slot>
    </template>
    <div class="menu-wrap">
      <div v-if="filter" class="search-wrap">
        <el-input v-model="state.filter" placeholder="搜索" />
      </div>
      <el-scrollbar max-height="300px">
        <slot>
          <div class="menu">
            <div
              v-for="menu in state.menuData"
              :key="menu[defaultProps.id]"
              class="menu-item"
              :class="{ 'is-active': current[defaultProps.id] === menu[defaultProps.id] }"
              @click="choseItem(menu)"
            >
              <span class="menu-label">{{ menu.label }}</span>
            </div>
          </div>
        </slot>
      </el-scrollbar>
    </div>
  </el-popover>
</template>

<script lang="ts" setup>
import {
  computed,
  defineEmits,
  defineProps,
  onMounted,
  PropType,
  reactive,
  toRefs,
  watch,
} from 'vue'

import IBaseObj from '#/index'

const props = defineProps({
  linkText: {
    type: String,
    default: '',
  },
  filter: {
    type: Boolean,
    default: true,
  },
  defaultProps: {
    type: Object,
    default: () => {
      return {
        id: 'code',
        label: 'value',
      }
    },
  },
  menuData: {
    type: Array as PropType<IBaseObj[]>,
    default: () => [],
  },
})

// 'update:menuData'
const emits = defineEmits(['update:linkText', 'select'])

const state: IBaseObj = reactive({
  visible: false,
  current: {},
  filter: '',
  initMenuData: [],
  menuData: [],
})

const { visible, current } = toRefs(state)

// const data: any = computed({
//   get() {
//     return props.menuData
//   },
//   set(val) {
//     emits('update:menuData', val)
//   }
// })

// const data = computed(() => {
//   console.log('s', state.value)
//   if (state.value) {
//     return props.menuData.filter((v: any) => v[props.defaultProps.label].indexOf(state.filter) !== -1)
//   } else {
//     console.log('p', props.menuData)
//     return props.menuData
//   }
// })

// console.log('d1', data.value)

onMounted(() => {
  state.initMenuData = props.menuData
  state.menuData = props.menuData
})

const _linkText = computed({
  get() {
    return props.linkText
  },
  set(val) {
    emits('update:linkText', val)
  },
})

watch(
  () => state.filter,
  (val) => {
    if (val) {
      const arr = props.menuData.filter(
        (v: any) => v[props.defaultProps.label].indexOf(state.filter) !== -1
      )

      state.menuData = arr
    } else {
      state.menuData = props.menuData
    }

    console.log('ss', state.menuData)
  },
  {
    immediate: true,
  }
)

const choseItem = (v: IBaseObj) => {
  state.current = v
  console.log('v', v)
  visible.value = false
  _linkText.value = v[props.defaultProps.label]
  emits('select', v[props.defaultProps.id])
}
</script>

<style lang="scss">
.filter-popper {
  max-width: 280px;

  &.el-popper {
    padding: 0;
  }

  .search-wrap {
    width: 230px;
    padding: 15px;
  }

  .menu {
    &-item {
      padding: 0 15px;
      line-height: 38px;
      cursor: pointer;

      &:hover,
      &.is-active {
        background: #e0eeff;
      }

      &.is-active {
        .menu-label {
          font-weight: 600;
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.el-dropdown-link {
  margin-left: 15px;
  color: var(--color-base);
  cursor: pointer;
}
</style>
